<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>航班统计 - 航班数据分析系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CBCB',
                        accent: '#FF7D00',
                        dark: '#0F172A',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style>
        /* 响应式容器，保持合适比例，自适应父容器宽度 */
        .chart-container {
            width: 100%;
            aspect-ratio: 16 / 9;
            position: relative;
        }
        /* 覆盖内嵌 div 做全屏定位 */
        .chart-container > div {
            position: absolute !important;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
        }
        .small-chart {
            width: 100%;
            aspect-ratio: 4 / 3;
            position: relative;
        }
        .small-chart > div {
            position: absolute !important;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
        }
        .nav-active {
            background-color: #165DFF;
            color: white !important;
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="bg-primary text-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-plane text-2xl"></i>
                <h1 class="text-xl font-bold">航班数据分析系统</h1>
            </div>
            <div class="hidden md:flex space-x-1">
                <a href="{{ url_for('admin_index' if session.get('role') == 'admin' else 'index') }}"
                    class="px-4 py-2 rounded hover:bg-primary/80 transition-colors">首页</a>
                <a href="{{ url_for('routes') }}" class="px-4 py-2 rounded hover:bg-primary/80 transition-colors">航线分布</a>
                <a href="{{ url_for('airlines') }}" class="px-4 py-2 rounded hover:bg-primary/80 transition-colors">航空公司</a>
                <a href="{{ url_for('statistics') }}" class="px-4 py-2 rounded nav-active">航班统计</a>
                <a href="{{ url_for('price_revenue') }}" class="px-4 py-2 rounded hover:bg-primary/80 transition-colors">票价-收入分析</a>
                <a href="{{ url_for('about') }}" class="px-4 py-2 rounded hover:bg-primary/80 transition-colors">关于系统</a>
            </div>
            <button class="md:hidden text-white focus:outline-none">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </nav>

    <!-- 模块标题 -->
    <div class="bg-gradient-to-r from-green-600 to-teal-600 py-12 text-white">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-3xl font-bold mb-4">航班统计分析</h2>
            <p class="max-w-2xl mx-auto">探索航班出发时间分布、航班量变化趋势、航班总体准点率及每日top10的航班量</p>
        </div>
    </div>

    <!-- 图表导航 -->
    <div class="container mx-auto px-4 py-6">
        <div class="flex flex-wrap justify-center gap-2 mb-8">
            <a href="#departure-time" class="bg-white px-4 py-2 rounded-full shadow hover:bg-gray-100 transition-colors">
                <i class="fa fa-clock-o mr-2 text-primary"></i>出发时间分布
            </a>
            <a href="#daily-top" class="bg-white px-4 py-2 rounded-full shadow hover:bg-gray-100 transition-colors">
                <i class="fa fa-bar-chart mr-2 text-secondary"></i>每日航班量前十动态图
            </a>
            <a href="#ontime-rate" class="bg-white px-4 py-2 rounded-full shadow hover:bg-gray-100 transition-colors">
                <i class="fa fa-dashboard mr-2 text-secondary"></i>航班准点率仪表盘
            </a>
            <a href="#flight-trend" class="bg-white px-4 py-2 rounded-full shadow hover:bg-gray-100 transition-colors">
                <i class="fa fa-line-chart mr-2 text-secondary"></i>航班量趋势
            </a>
        </div>
    </div>

    <!-- 图表区域 -->
    <main class="container mx-auto px-4 py-6 flex-grow">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 auto-rows-min">
        <!-- 出发时间分布 -->
        <section id="departure-time" class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <div class="flex items-center mb-4">
                <i class="fa fa-clock-o text-primary text-2xl mr-3"></i>
                <h3 class="text-xl font-semibold">航班出发时间分布</h3>
            </div>
            <div class="chart-container">
                {{ departure_time|safe }}
            </div>
            <div class="mt-4 text-gray-600">
                <p>该图展示了一天中不同时间段的航班出发数量分布情况，帮助您了解航班的时间分布规律。</p>
                <ul class="list-disc pl-5 space-y-1">
                    <li>横轴表示24小时时间段</li>
                    <li>柱状高度表示该时段航班数量</li>
                    <li>绿色渐变表示航班密度变化</li>
                    <li>标记线显示高峰和低谷时段</li>
                </ul>
            </div>
        </section>

        <!-- 每日航班TOP10 -->
        <section id="daily-top" class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <div class="flex items-center mb-4">
                <i class="fa fa-bar-chart text-secondary text-2xl mr-3"></i>
                <h3 class="text-xl font-semibold">每日航班量前十动态图</h3>
            </div>
            <div class="chart-container">
                {{ top10_airlines|safe }}
            </div>
            <div class="mt-4 text-gray-600">
                <p>该图展示了每日航班量排名前十的航空公司，数据会随时间动态变化。</p>
                <ul class="list-disc pl-5 space-y-1">
                    <li>图表自动播放展示每日数据变化</li>
                    <li>横条长度表示航空公司当日航班量</li>
                    <li>点击时间轴可查看特定日期数据</li>
                    <li>支持暂停/播放控制动画进度</li>
                </ul>
            </div>
        </section>

        <!-- 准点率仪表盘 -->
        <section id="ontime-rate" class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <div class="flex items-center mb-4">
                <i class="fa fa-dashboard text-secondary text-2xl mr-3"></i>
                <h3 class="text-xl font-semibold">航班准点率仪表盘</h3>
            </div>
            <div class="chart-container">
                {{ ontime_rate|safe }}
            </div>
            <div class="mt-4 text-gray-600">
                <p>该仪表盘展示了整体航班的准点率情况（延误≤15分钟视为准点），帮助您了解航班的准时情况。</p>
                <ul class="list-disc pl-5 space-y-1">
                    <li>仪表盘指针指示当前总体航班准点率数值</li>
                    <li>不同颜色区域表示准点率等级</li>
                    <li>蓝色区域为优秀，黄色区域为良好，红色区域需改进</li>
                    <li>数据基于三个月航班统计结果</li>
                </ul>
            </div>
        </section>

        <!-- 航班量趋势 -->
        <section id="flight-trend" class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <div class="flex items-center mb-4">
                <i class="fa fa-line-chart text-secondary text-2xl mr-3"></i>
                <h3 class="text-xl font-semibold">航班量趋势图</h3>
            </div>
            <div class="chart-container">
                {{ flight_trend|safe }}
            </div>
            <div class="mt-4 text-gray-600">
                <p>该折线图展示了一段时间内的航班量变化趋势，帮助您了解航班量的波动情况和发展趋势。</p>
                <ul class="list-disc pl-5 space-y-1">
                    <li>横轴表示日期，纵轴表示航班数量</li>
                    <li>曲线展示三个月航班量变化趋势</li>
                    <li>使用下方滑块调整查看时间范围</li>
                    <li>支持鼠标悬停查看每日具体数据</li>
                </ul>
            </div>
        </section>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8">
        <div class="container mx-auto px-4">
            <div class="text-center text-gray-500">
                <p>&copy; 2024 航班数据分析系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="backToTop" class="fixed bottom-6 right-6 bg-primary text-white p-3 rounded-full shadow-lg opacity-0 transition-opacity duration-300 hover:bg-primary/90">
        <i class="fa fa-arrow-up"></i>
    </button>

    <script>
        // 回到顶部功能
        const backToTopBtn = document.getElementById('backToTop');

        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTopBtn.classList.remove('opacity-0');
                backToTopBtn.classList.add('opacity-100');
            } else {
                backToTopBtn.classList.remove('opacity-100');
                backToTopBtn.classList.add('opacity-0');
            }
        });

        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // 平滑滚动到锚点
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>
</html>
